<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>自动化运维资源统计</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta name="theme-color" content="#fafafa">
  <link rel="manifest" href="../../../../site.webmanifest">

  <link rel="apple-touch-icon" href="../../../../icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="../../../../css/normalize.css">
  <link rel="stylesheet" href="../../../../css/main.css">
  <link rel="stylesheet" href="../../../../js/layui/ext/soulTable.css">
  <link rel="stylesheet" href="../../../../js/layui/css/layui.css">
  <style>
    html,
    body {
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
    }

    *,
    *::before,
    *::after {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      background: white;
      display: flex;
    }

    body > article {
      flex: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    body > aside {
      width: 300px;
      height: 100%;
      background: white;
    }

    article > header {
      width: 100%;
      height: 105px;
      display: flex;
      padding-top: 10px;
      padding-bottom: 10px;
      background: white;
      flex-shrink: 0;
    }

    article > main {
      width: 100%;
      height: 1000px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      margin: 0 0 30px 0;
    }

    article > footer {
      width: 100%;
      height: 700px;
    }

    header svg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: 0 auto 5px auto;
    }

    header {
      padding-top: 10px;
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: center;
      color: rgba(253, 255, 255, 1);
      font-weight: bolder;
      position: relative;
    }

    header > p {
      font-size: 1.4em;
      width: 100%;
      height: 70px;
      margin: 5px 5px;
      text-shadow: 0 1px rgba(122, 174, 195, 0.15), 0 1px rgba(122, 174, 195, 0.3),
      0 1px rgba(122, 174, 195, 0.45), 0 1px rgba(122, 174, 195, 0.65),
      0 1px rgba(122, 174, 195, 0.75), 2px 4px 5px rgba(122, 174, 195, 1);
      /* border: 1px solid #21A5CA;*/
      /*  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);*/
    }

    main > blockquote {
      display: flex;
    }
  </style>
</head>
<body>
<article>
  <header>
    <svg width="600px" height="100%" xmlns="http://www.w3.org/2000/svg" stroke="null"
         style="vector-effect: non-scaling-stroke;">
      <defs>
        <linearGradient id="blue_line" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
          <stop offset="0%" style="stop-color: rgba(36,99,136, 0.65);"/>
          <stop offset="50%" style="stop-color: rgba(36,99,136, 0.4);"/>
          <stop offset="100%" style="stop-color: rgba(36,99,136, 0.65);"/>
        </linearGradient>
      </defs>
      <g stroke="url(#blue_line)" stroke-width="2">
        <line id="svg_9" y2="85%" x2="84.5%" y1="75%" x1="83%"/>
        <line id="svg_11" y2="20%" x2="2%" y1="0" x1="0"/>
        <line id="svg_12" y2="100%" x2="16%" y1="100%" x1="12%"/>
        <line id="svg_13" y2="90%" x2="17%" y1="100%" x1="16%"/>
        <line id="svg_14" y2="90%" x2="83%" y1="90%" x1="17%"/>
        <line id="svg_15" y2="100%" x2="84%" y1="90%" x1="83%"/>
        <line id="svg_16" y2="100%" x2="88%" y1="100%" x1="84%"/>
        <line id="svg_17" y2="20%" x2="92.5%" y1="85%" x1="87.5%"/>
        <line id="svg_18" y2="20%" x2="98%" y1="20%" x1="94%"/>
        <line id="svg_19" y2="0%" x2="100%" y1="20%" x1="98%"/>
        <line id="svg_20" y2="100%" x2="12%" y1="20%" x1="6%"/>
        <line id="svg_21" y2="85%" x2="82.5%" y1="85%" x1="17.5%"/>
        <line id="svg_23" y2="20%" x2="92.5%" y1="20%" x1="7.5%"/>
        <line id="svg_24" y2="85%" x2="12.5%" y1="20%" x1="7.5%"/>
        <line id="svg_25" y2="85%" x2="87.5%" y1="85%" x1="84.5%"/>
        <line id="svg_26" y2="20%" x2="94%" y1="100%" x1="88%"/>
        <line id="svg_27" y2="80%" x2="18%" y1="85%" x1="17.5%"/>
        <line id="svg_28" y2="75%" x2="83%" y1="75%" x1="16.5%"/>
        <line id="svg_29" y2="85%" x2="82.5%" y1="80%" x1="82%"/>
        <line id="svg_30" y2="80%" x2="18%" y1="80%" x1="82%"/>
        <line x1="2%" y1="20%" x2="6%" y2="20%" id="svg_1"/>
        <line x1="12.5%" y1="85%" x2="15.5%" y2="85%" id="svg_2"/>
        <line x1="16.5%" y1="75%" x2="15.5%" y2="85%" id="svg_3"/>
      </g>
    </svg>
    <p>网管自动化运维平台</p>
  </header>
  <main>
    <blockquote>
      <div id="resourceReport" style="width: calc(100% - 300px); height: 250px;"></div>
      <div id="lifeState" style="width: 300px; height: 250px;"></div>
    </blockquote>
    <blockquote>
      <div id="roomReport" style="width: calc(100% - 300px); height: 250px;"></div>
      <div id="resourcesScatter" style="width:300px;height: 250px;"></div>
    </blockquote>

    <div id="businessSystemCount" style="width:100%;height: 250px;"></div>
    <div id="numberChangeTrend" style="width:100%;height: 250px;"></div>
  </main>
  <footer id="dynamicDisLogDiv">
  </footer>
</article>
<script src="../../../../js/common/jquery-3.5.1.min.js"></script>
<script src="../../../../js/layui/layui.js"></script>
<script src="../../../../js/echarts/echarts.js"></script>
<script src="../../../../js/common/underscore-min.js"></script>
<script>
  var titleColor = "#666"
  var fontColor = "#194d8b";

  $(document).ready(function () {
    loadRoomReport();
    loadLifeState();
    loadResourcesReport();
    loadBusinessSystemReport();
    loadNumberTrend();
    loadResourcesScatter();
  });

  //加载设备生命周期统计
  function loadLifeState() {
    var result = [
      {
        "P_LIFE_STATE_ID": "已接收",
        "NUM": 2,
        "LIFE_STATE_ID": 1
      },
      {
        "P_LIFE_STATE_ID": "未断电",
        "NUM": 1,
        "LIFE_STATE_ID": 22
      },
      {
        "P_LIFE_STATE_ID": "已下线",
        "NUM": 21,
        "LIFE_STATE_ID": 6
      },
      {
        "P_LIFE_STATE_ID": "待封网",
        "NUM": 10,
        "LIFE_STATE_ID": 11
      },
      {
        "P_LIFE_STATE_ID": "已下电",
        "NUM": 85,
        "LIFE_STATE_ID": 13
      },
      {
        "P_LIFE_STATE_ID": "已部署",
        "NUM": 1,
        "LIFE_STATE_ID": 2
      },
      {
        "P_LIFE_STATE_ID": "已上线",
        "NUM": 2,
        "LIFE_STATE_ID": 21
      },
      {
        "P_LIFE_STATE_ID": "封网中",
        "NUM": 6,
        "LIFE_STATE_ID": 14
      },
      {
        "P_LIFE_STATE_ID": "使用中",
        "NUM": 522,
        "LIFE_STATE_ID": 4
      },
      {
        "P_LIFE_STATE_ID": "已上架",
        "NUM": 3,
        "LIFE_STATE_ID": 17
      },
      {
        "P_LIFE_STATE_ID": "已报废",
        "NUM": 32,
        "LIFE_STATE_ID": 7
      },
      {
        "P_LIFE_STATE_ID": "待下线",
        "NUM": 6,
        "LIFE_STATE_ID": 18
      },
      {
        "P_LIFE_STATE_ID": "待确认",
        "NUM": 54,
        "LIFE_STATE_ID": 15
      },
      {
        "P_LIFE_STATE_ID": "待上线",
        "NUM": 2,
        "LIFE_STATE_ID": 19
      },
      {
        "P_LIFE_STATE_ID": "待断电",
        "NUM": 1,
        "LIFE_STATE_ID": 10
      },
      {
        "P_LIFE_STATE_ID": "已下架",
        "NUM": 1,
        "LIFE_STATE_ID": 16
      }
    ];
    var legendAxisData = [];
    var seriesAxisData = [];
    for (var i = 0; i < result.length; i++) {
      legendAxisData.push(result[i].P_LIFE_STATE_ID);
      seriesAxisData.push({
        "name": result[i].P_LIFE_STATE_ID,
        "value": result[i].NUM,
        "label": {"normal": {"formatter": '{b} : {c}'}}
      });
    }
    var option = {
      title: {
        text: '',
        subtext: '资源使用状态',
        x: 'center',
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series: [
        {
          name: '资源数量',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: seriesAxisData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var myCharts = echarts.init(document.getElementById("lifeState"));
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
  }

  function loadRoomReport() {
    var result = [
      {
        "ROOM_ID": "baefca8fc80b4a46985a31bfd02a354a",
        "ROOM_NAME": "红谷滩新6楼",
        "NUM": 844
      },
      {
        "ROOM_ID": "0e7f1276fb1f4a24b7042e1520784139",
        "ROOM_NAME": "红谷滩新5楼",
        "NUM": 723
      },
      {
        "ROOM_ID": "99796fe9b26f4d8d99640f3bc07842bb",
        "ROOM_NAME": "红谷滩新9楼",
        "NUM": 519
      },
      {
        "ROOM_ID": "d3735dfee46f4315a8135db4c577738d",
        "ROOM_NAME": "洪城16楼",
        "NUM": 360
      },
      {
        "ROOM_ID": "9fc506a90d6a41fc865a01e81e3c08b6",
        "ROOM_NAME": "洪城2楼",
        "NUM": 299
      },
      {
        "ROOM_ID": "7088d2eac8624b96b2a70177b8c63870",
        "ROOM_NAME": "洪城10楼",
        "NUM": 231
      },
      {
        "ROOM_ID": "54cc792bad474659a065d0dabd99a21f",
        "ROOM_NAME": "洪城3楼",
        "NUM": 217
      },
      {
        "ROOM_ID": "518e22bc6374416296c5021e341c2d8b",
        "ROOM_NAME": "红谷滩老5楼",
        "NUM": 186
      },
      {
        "ROOM_ID": "065f58a6ed3741d2b332b1a3f853c4ac",
        "ROOM_NAME": "红谷滩老9楼",
        "NUM": 125
      },
      {
        "ROOM_ID": "597d6fe53e04479f977ef1df16ab8316",
        "ROOM_NAME": "洪城7楼",
        "NUM": 122
      }
    ];
    var xAxisData = [];
    var yAxisData = [];
    for (var i = 0; i < result.length; i++) {
      xAxisData.push(result[i].ROOM_NAME);
      yAxisData.push(result[i].NUM);
    }
    var option = {
      title: {
        text: '按\n机\n房\n维\n度\n统\n计\n',
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
      },
      tooltip: {},
      legend: {},
      grid: {
        left: "40px",
        right: "0",
        bottom: "80px",
        top: '20px'
      },
      xAxis: {
        boundaryGap: ["10px", "1%"],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          show: true,
          margin: 15,
          textStyle: {
            color: '#444',
            fontSize: 14
          }
        },
        data: xAxisData
      },
      yAxis: {
        interval: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          type: 'bar',
          barMaxWidth: 20,
          itemStyle: {
            normal: {
              color: '#0080cc'
            }
          },
          data: yAxisData,
          z: 2,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          }
        }
      ]
    };
    var myCharts = echarts.init(document.getElementById("roomReport"));
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
  }

  function loadResourcesReport() {
    var result = [
      {
        "SPEC_NAME": "虚拟机",
        "NUM": 3257,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 9000000040
      },
      {
        "SPEC_NAME": "PC服务器",
        "NUM": 3191,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000003
      },
      {
        "SPEC_NAME": "小型机",
        "NUM": 549,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000001
      },
      {
        "SPEC_NAME": "重保设备",
        "NUM": 275,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000039
      },
      {
        "SPEC_NAME": "刀片服务器",
        "NUM": 233,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000002
      },
      {
        "SPEC_NAME": "交换机",
        "NUM": 178,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000009
      },
      {
        "SPEC_NAME": "IO扩展设备",
        "NUM": 102,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000006
      },
      {
        "SPEC_NAME": "防火墙",
        "NUM": 100,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000012
      },
      {
        "SPEC_NAME": "一体机-服务器",
        "NUM": 83,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5014000004
      },
      {
        "SPEC_NAME": "负载均衡",
        "NUM": 77,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000008
      },
      {
        "SPEC_NAME": "SAN交换机",
        "NUM": 69,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000007
      },
      {
        "SPEC_NAME": "路由器",
        "NUM": 57,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000011
      },
      {
        "SPEC_NAME": "数据库一体机",
        "NUM": 42,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5011000004
      },
      {
        "SPEC_NAME": "安全设备",
        "NUM": 35,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000010
      },
      {
        "SPEC_NAME": "备份一体机",
        "NUM": 27,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5012000004
      },
      {
        "SPEC_NAME": "一体机-IB交换机",
        "NUM": 22,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5013000004
      },
      {
        "SPEC_NAME": "未知设备",
        "NUM": 15,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000017
      },
      {
        "SPEC_NAME": "其他",
        "NUM": 14,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000018
      },
      {
        "SPEC_NAME": "一体机-网络交换机",
        "NUM": 13,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5015000004
      },
      {
        "SPEC_NAME": "磁带库",
        "NUM": 9,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000020
      },
      {
        "SPEC_NAME": "数据分析",
        "NUM": 8,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000014
      },
      {
        "SPEC_NAME": "磁带机",
        "NUM": 4,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000005
      },
      {
        "SPEC_NAME": "其他一体机",
        "NUM": 4,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000004
      },
      {
        "SPEC_NAME": "主机-台式机",
        "NUM": 2,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000037
      },
      {
        "SPEC_NAME": "DNS设备",
        "NUM": 2,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000019
      },
      {
        "SPEC_NAME": "分光器",
        "NUM": 2,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000016
      },
      {
        "SPEC_NAME": "入侵检测",
        "NUM": 2,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000015
      },
      {
        "SPEC_NAME": "资源池业务",
        "NUM": 1,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000021
      },
      {
        "SPEC_NAME": "主机-工作站",
        "NUM": 1,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000038
      },
      {
        "SPEC_NAME": "VPN接入",
        "NUM": 1,
        "FREQUENCY": "0.00%",
        "SPEC_ID": 5010000013
      }
    ];
    var xAxisData = [];
    var yAxisData = [];
    var lineAxisData = [];
    var legend = [];
    for (var i = 0; i < result.length; i++) {
      xAxisData.push(result[i].SPEC_NAME);
      yAxisData.push(result[i].NUM);
      lineAxisData.push(result[i].FREQUENCY);
      legend.push(result[i].SPEC_NAME);
    }

    var option = {
      title: {
        text: '按\n类\n型\n维\n度\n统\n计',
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
      },
      tooltip: {
        trigger: 'axis',
        confine: true,
        extraCssText: 'z-index:999',
        formatter: function (params) {
          var name = params[0].name;
          var value = params[0].value;
          return name + "在CMDB中" + value + "台";
        }
      },
      legend: {
        data: legend
      },
      grid: {
        left: "40px",
        right: "0",
        bottom: "80px",
        top: '20px'
      },
      xAxis: {
        boundaryGap: ["10px", "1%"],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          show: true,
          margin: 15,
          textStyle: {
            color: '#444',
            fontSize: 14
          }
        },
        data: xAxisData
      },
      yAxis: {
        interval: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          type: 'bar',
          barMaxWidth: 20,
          itemStyle: {
            normal: {
              color: '#0080cc'
            }
          },
          data: yAxisData,
          z: 2,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          }
        }
      ]
    };
    var myCharts = echarts.init(document.getElementById("resourceReport"));
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
  }

  function loadBusinessSystemReport() {
    var result = [
      {
        "NUM": 1,
        "NAME": "BOSS"
      },
      {
        "NUM": 8,
        "NAME": "安全管理系统"
      },
      {
        "NUM": 152,
        "NAME": "BOMC"
      },
      {
        "NUM": 313,
        "NAME": "电渠平台"
      },
      {
        "NUM": 663,
        "NAME": "大数据运营平台"
      },
      {
        "NUM": 675,
        "NAME": "管理信息系统"
      },
      {
        "NUM": 1788,
        "NAME": "CRM"
      }
    ];
    var value = [];
    var item = [];
    for (var i = 0; i < result.length; i++) {
      value.push(result[i].NUM);
      item.push(result[i].NAME);
    }
    var option = {
      title: {
        text: '按\n业\n务\n系\n统\n维\n度\n统\n计\n',
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
      },
      // 调色，
      backgroundColor: '#fff',
      color: ['#f88a4d'],
      // 提示框
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          fontSize: 12
        },
        formatter: function (params) {
          var name = params[0].name;
          var value = params[0].value;
          return "[" + name + "]包含子业务系统" + value + "个";
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '4%',
        right: '16%',
        top: '2%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: {
        show: false,
        boundaryGap: [0, 0.2],
      },
      yAxis: {
        type: 'category',
        // 轴线
        axisLine: {
          show: false,
          boundaryGap: true
        },
        // 刻度
        axisTick: {
          show: false,
          alignWithLabel: true,
          boundaryGap: true
        },
        axisLabel: {
          show: true,
          margin: 12,
          textStyle: {
            fontSize: 12,
            color: '#333'
          },
        },
        data: item
      },

      series: [{
        type: 'bar',
        barCategoryGap: '50%',
        barWidth: 16,
        label: {
          normal: {
            show: true,
            position: 'right',
            // 图示标签显示内容格式化
            formatter: function (item) {
              return item.value;
            }
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#2b91e4' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#0e1aff' // 100% 处的颜色
            }], false),
            barBorderRadius: [0, 50, 50, 0],
            shadowColor: 'rgba(0,0,0,0.1)',
            shadowBlur: 3,
            shadowOffsetY: 3
          }
        },
        zlevel: 10,
        data: value
      }]
    };
    var myCharts = echarts.init(document.getElementById("businessSystemCount"));
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
  }

  function loadNumberTrend() {
    var data = {
      "data": [
        {
          "name": "小型机",
          "data": [
            971,
            1007,
            1007,
            1007,
            678,
            1007,
            1007,
            1007,
            1007,
            1007,
            1007,
            1007,
            1201,
            1007,
            1007,
            1007,
            1005,
            1004
          ],
          "type": "line"
        },
        {
          "name": "PC服务器",
          "data": [
            1589,
            2100,
            2401,
            2785,
            3012,
            3124,
            3221,
            3327,
            3329,
            3329,
            3329,
            3329,
            3329,
            3329,
            3329,
            3329,
            3329,
            3329
          ],
          "type": "line"
        }
      ],
      "legend": [
        "小型机",
        "PC服务器"
      ],
      "x": [
        "2021-02-10",
        "2021-02-20",
        "2021-02-28",
        "2021-03-10",
        "2021-03-20",
        "2021-03-31",
        "2021-04-10",
        "2021-04-20",
        "2021-04-30",
        "2021-05-10",
        "2021-05-20",
        "2021-05-31",
        "2021-06-10",
        "2021-06-20",
        "2021-06-30",
        "2021-07-10",
        "2021-07-20",
        "2021-07-31"
      ]
    };
    var option = {
      title: {
        text: '按\n资\n产\n数\n量\n变\n化\n趋\n势\n统\n计',
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
      },
      tooltip: {
        trigger: 'axis',
        confine: true,
        extraCssText: 'z-index:999'
      },
      legend: {
        data: data.legend
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.x
      },
      yAxis: {
        type: 'value'
      },
      series: data.data
    };
    var myCharts = echarts.init(document.getElementById("numberChangeTrend"));
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
  }

  function loadResourcesScatter() {
    var color = [
      "#f33768",
      "#f6d54a",
      "#45dbf7",
      "#f69846",
      "#f845f1",
      "#4777f5",
      "#5045f6",
      "#ad46f3",
      "#f845f1",
      "#24f352",
      "#f8f819",
      "#96e8f3",
      "#f86614",
      "#3ff3ce",
      "#f8f6dd",
      "#9577f3",
      "#f8ae9f",
      "#dbf3af",
      "#e286f8",
      "#7babf8"
    ];
    let list = [];
    var names = ["物理机", "虚拟机", "网络设备", "存储", "其他"];
    var data = [444, 501, 468, 478, 431];
    var total = 0;
    for (var i in data) {
      total += data[i];
    }
    for (let i in data) {
      list.push(
        {
          value: data[i],
          name: names[i],
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i],
              color: color[i]
            }
          }
        },
        {
          value: total / 30,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0
            }
          }
        }
      );
    }
    var option = {
      title: {
        text: "资源分布情况",
        textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: titleColor
        },
        x: "center"
      },
      tooltip: {
        show: false
      },
      legend: {
        /*orient: 'vertical',*/
        data: names,
        icon: "path://M60.217 633.91S310.415 738.469 434.781 964.54c149.378-279.763 436.11-540.714 521.05-560.014V63.083c-342.237 226.07-506.576 642.342-506.576 642.342l-180.05-191.614-208.988 120.1z",
        right: "0px",
        top: "20px",
        textStyle: {
          color: fontColor,
          fontSize: 8
        }
      },
      series: [
        {
          name: "",
          type: "pie",
          clockWise: false,
          startAngle: "90",
          center: ["49%", "60%"],
          radius: ["35%", "35%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                formatter: function (params) {
                  var percent = ((params.value / total) * 100).toFixed(1);
                  var name = params.name.replace(/\n/g, "");
                  if (params.name !== "") {
                    return name + "\n{white|" + percent + "%}";
                  } else {
                    return "";
                  }
                },
                rich: {
                  white: {
                    align: "center",
                    padding: [3, 0]
                  }
                }
              },
              labelLine: {
                length: 15,
                length2: 20,
                show: true,
                color: "#00ffff"
              }
            }
          },
          data: list,
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return idx * 50;
          }
        },
        {
          name: "",
          type: "pie",
          center: ["49%", "60%"],
          radius: ["35%", "35%"],
          itemStyle: {
            color: "transparant"
          },
          startAngle: "90",
          data: [
            {
              value: total,
              name: "",
              label: {
                normal: {
                  show: true,
                  formatter: "{c|{c}} {b|条记录}",
                  rich: {
                    c: {
                      color: "rgb(98,137,169)",
                      fontSize: 12,
                      fontWeight: "bold",
                      lineHeight: 5
                    },
                    b: {
                      color: "rgb(98,137,169)",
                      fontSize: 14,
                      lineHeight: 5
                    }
                  },
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bold"
                  },
                  position: "center"
                }
              }
            }
          ]
        }
      ]
    };
    const myChart = echarts.init(document.getElementById("resourcesScatter"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

</script>
</body>
</html>
